<template>
	<div class="side-nav">
		<ul class="side-list">
			<li>
				<a href="javascript:;">
					<i class="fa fa-qq" aria-hidden="true"></i>
				</a>
				<div class="produce">
					<i></i>
					QQ分享
				</div>
			</li>
			<li>
				<a href="javascript:;">
					<i class="fa fa-pencil"></i>
				</a>
				<div class="produce">
					<i></i>
					反馈问题
				</div>
			</li>
			<li>
				<a href="javascript:;">
					<i class="fa fa-phone" aria-hidden="true"></i>
				</a>
				<div class="produce">
					<i></i>
					联系客服
				</div>
			</li>
			<li>
				<a href="javascript:;">
					<i class="fa fa-cog"></i>
				</a>
				<div class="produce">
					<i></i>
					设置选项
				</div>
			</li>
			<li>
				<a href="" target="">TOP</a>
				<div class="produce">
					<i></i>
					返回头部
				</div>
			</li>
		</ul>	
	</div>
</template>

<script>
</script>

<style scoped>
	.side-nav{
		width:45px;
		line-height:30px;
		border:1px solid lightgrey;
		border-top:none;
		position: fixed;
		top:600px;
		left:10px;
		z-index: 999999;
		background: #F7F7F7;
	}
	.side-list>li{
		position:relative;
		border-top:1px solid lightgrey;
		text-align: center;
	}
	.side-list>li a{
		color:#333;
	}
	.side-list>li:hover .produce{
		transform: rotateX(0);
		opacity: 1;
	}
	.side-list>li:hover a{
		color: #1E9FFF;
	}
	.produce{
		width:80px;
		height:28px;
		line-height:28px;
		position: absolute;
		right:-100px;
		top:1px;
		background: #1E9FFF;
		color:white;
		transform: rotateX(90deg);
		transition:.2s;
		opacity: 0;
	}
	.produce i{
		display:inline-block;
		width:0;
		height:0;
		border:6px solid transparent;
		border-right-color:#1E9FFF;
		position: absolute;
		top:8px;
		left:-12px;
	}
</style>